<template>
  <div style="display: flex;flex-direction: column;min-height: 20px;"
    :style="{
      'background': nodeModel.background,
      'marginTop': nodeModel.marginTop/2+'px',
      'marginBottom': nodeModel.marginBottom/2+'px',
      'marginLeft': nodeModel.marginLeft/2+'px',
      'marginRight': nodeModel.marginLeft/2+'px',
      'paddingTop': nodeModel.paddingTop/2+'px',
      'paddingBottom': nodeModel.paddingBottom/2+'px',
      'paddingLeft': nodeModel.paddingLeft/2+'px',
    }">
    <div>
      <el-carousel :height="nodeModel.heightForCover1/2+'px'" arrow="never" :interval="parseInt(nodeModel.duration)">
        <el-carousel-item v-for="(item, index) in itemDetail.coverPhotoList" :key="index">
            <el-image :src="item.coverUrl" fit="cover"
            :style="{
              'width': nodeModel.widthForCover1/2+'px',
              'height': nodeModel.heightForCover1/2+'px',
              'borderRadius': nodeModel.borderRadiusForCover1/2+'px',
            }"></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div :style="{
      'paddingTop': nodeModel.paddingTopForFlex1/2+'px',
      'paddingBottom': nodeModel.paddingBottomForFlex1/2+'px',
      'paddingLeft': nodeModel.paddingLeftForFlex1/2+'px',
      'paddingRight': nodeModel.paddingRightForFlex1/2+'px'
    }">
      <!-- 商品名称 -->
      <div class="limitLineNumOfOne" v-if="nodeModel.isShowForText1" :style="{
        'marginTop': nodeModel.marginTopForText1/2+'px',
        'color': nodeModel.colorForText1,
        'font-size': nodeModel.fontsizeForText1/2 + 'px',
        'font-weight': nodeModel.fontweightForText1,
      }">{{itemDetail.itemName}}</div>
      <!-- 原价 -->
      <div style="display: flex;flex-direction: row;align-items: center;" v-if="nodeModel.isShowForText2"
      :style="{
        'marginTop': nodeModel.marginTopForText2/2+'px',
        'color': nodeModel.colorForText2,
        'font-size': nodeModel.fontsizeForText2/2 + 'px',
        'font-weight': nodeModel.fontweightForText2
      }">
        <div v-if="nodeModel.titleForText2">{{nodeModel.titleForText2}}</div>
        <div v-if="nodeModel.isShowForText2" :style="{
          'text-decoration': nodeModel.deleteLineForText2
        }">¥{{itemDetail.marketPrice}}</div>
      </div>
      <!-- 销售价格 -->
      <div style="display: flex;flex-direction: row;align-items: baseline;">
        <div v-if="nodeModel.isShowForText3" :style="{
          'marginTop': nodeModel.marginTopForText3/2+'px',
          'color': nodeModel.colorForText3,
          'font-size': nodeModel.fontsizeForText3/2 + 'px',
          'font-weight': nodeModel.fontweightForText3
        }">¥{{itemDetail.suggestSellingPrice}}</div>
        <!-- 销量 -->
        <div style="display: flex;flex-direction: row;align-items: center;margin-left: 8px;" v-if="nodeModel.isShowForText4"
          :style="{
            'marginTop': nodeModel.marginTopForText4/2+'px',
            'color': nodeModel.colorForText4,
            'font-size': nodeModel.fontsizeForText4/2 + 'px',
            'font-weight': nodeModel.fontweightForText4
          }">
          <div v-if="nodeModel.titleForText4">{{nodeModel.titleForText4}}</div>
          <div style="margin-left: 4px;">{{itemDetail.sales}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
        
    },
    props:{
      nodeModel:{
            type: Object,
            default: res=>{}
        },
        itemDetail: {
          type: Object,
          default: {}
        }
    },
    data() {
      return {
        
      }
    },
    methods:{
        
    }
  }
</script>

<style lang="scss" scoped>

</style>